<script lang="ts" setup>
import type { PropType } from 'vue';
import { computed } from 'vue';

const ICON_MAP = {
  'user-circle': {
    box: '0 0 432 432',
    path: 'M213.5 3q88.5 0 151 62.5T427 216t-62.5 150.5t-151 62.5t-151-62.5T0 216T62.5 65.5T213.5 3zm0 64Q187 67 168 85.5t-19 45t19 45.5t45.5 19t45-19t18.5-45.5t-18.5-45t-45-18.5zm0 303q39.5 0 73-18.5T341 301q0-20-23.5-35.5t-52-23t-52-7.5t-52 7.5t-52 23T85 301q21 32 55 50.5t73.5 18.5z'
  },

  back: {
    box: '0 0 1024 1024',
    path: 'M736.256 1024 224.256 512 736.256 0 799.744 63.744 351.488 512 799.744 960.512Z'
  },

  refresh: {
    box: '0 0 1024 1024',
    path: 'M911.40249 607.60166c-21.244813-4.248963-46.738589 8.497925-50.987552 29.742738-42.489627 174.207469-195.452282 293.178423-373.908714 293.178424-212.448133 0-386.655602-174.207469-386.655602-386.655602s174.207469-386.655602 386.655602-386.655602c97.726141 0 195.452282 38.240664 263.435685 106.224067h-178.456432c-21.244813 0-42.489627 16.995851-42.489626 42.489626 0 21.244813 16.995851 42.489627 42.489626 42.489627h263.435685c21.244813 0 42.489627-16.995851 42.489626-42.489627v-263.435684c0-21.244813-16.995851-42.489627-42.489626-42.489627-21.244813 0-42.489627 16.995851-42.489627 42.489627v148.713693c-84.979253-76.481328-195.452282-118.970954-310.174274-118.970955-259.186722 0-471.634855 212.448133-471.634854 471.634855s212.448133 471.634855 471.634854 471.634855c216.697095 0 403.651452-148.713693 458.887967-356.912863 4.248963-21.244813-8.497925-42.489627-29.742738-50.987552z'
  },

  skin: {
    box: '64 64 896 896',
    path: 'M870 126H663.8c-17.4 0-32.9 11.9-37 29.3C614.3 208.1 567 246 512 246s-102.3-37.9-114.8-90.7a37.93 37.93 0 0 0-37-29.3H154a44 44 0 0 0-44 44v252a44 44 0 0 0 44 44h75v388a44 44 0 0 0 44 44h478a44 44 0 0 0 44-44V466h75a44 44 0 0 0 44-44V170a44 44 0 0 0-44-44zm-28 268H723v432H301V394H182V198h153.3c28.2 71.2 97.5 120 176.7 120s148.5-48.8 176.7-120H842v196z'
  },

  setting: {
    box: '64 64 896 896',
    path: 'M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z'
  },

  'arrow-down': {
    box: '0 0 16 16',
    path: 'M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'
  },

  'full-screen': {
    box: '0 0 30 30',
    path: 'M23 25h-4v-2h2.63l-5.753-5.658 1.354-1.331 5.769 5.674v-2.685h2v6h-2zm0-15.669l-5.658 5.658-1.331-1.331 5.658-5.658h-2.669v-2h6v6h-2v-2.669zm-15.027 15.669h4.027v-2h-2.676l5.676-5.658-1.335-1.331-5.692 5.674v-2.685h-1.973v6h1.973zm0-15.669l5.581 5.658 1.313-1.331-5.582-5.658h2.715v-2h-6v6h1.973v-2.669z'
  },

  'fulled-screen': {
    box: '0 0 30 30',
    path: 'M22 12v2h-6v-6h2v2.669l5.658-5.658 1.331 1.331-5.658 5.658h2.669zm-10 7.331l-5.658 5.658-1.331-1.331 5.658-5.658h-2.669v-2h6v6h-2v-2.669zm-4-7.331h2.669l-5.658-5.658 1.331-1.331 5.658 5.658v-2.669h2v6h-6v-2zm14 6h-2.669l5.658 5.658-1.331 1.331-5.658-5.658v2.669h-2v-6h6v2z'
  },

  minimize: {
    box: '64 64 896 896',
    path: 'M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z'
  },

  maximize: {
    box: '0 0 1024 1024',
    path: 'M209.37187512 209.37187512v605.25624975h605.25624975V209.37187512H209.37187512zM133.71484392 133.71484392h756.57031216v756.57031216H133.71484392V133.71484392z'
  },

  maximized: {
    box: '0 0 1024 1024',
    path: 'M865 107H341.5c-27.8 0-50.3 22.5-50.3 50.3v100.6H160.6c-27.8 0-50.3 22.5-50.3 50.3v553.4c0 27.8 22.5 50.3 50.3 50.3H714c27.8 0 50.3-22.5 50.3-50.3V730.4H865c27.8 0 50.3-22.5 50.3-50.3V157.3c0-27.8-22.5-50.3-50.3-50.3zM704.1 680.1v171.6H170.6V319.3H704v360.8z m149.9-9l-89.6-1V308.3c0-27.8-22.5-50.3-50.3-50.3H351.5v-90.6H856l-2 503.7z m9-1'
  },

  close: {
    box: '0 0 1024 1024',
    path: 'M566.97558594 521.09667969L856.8828125 231.18945312c14.63378906-14.63378906 14.63378906-38.75976563 0-53.39355468l-1.58203125-1.58203125c-14.63378906-14.63378906-38.75976563-14.63378906-53.39355469 0L512 466.51660156 222.09277344 176.21386719c-14.63378906-14.63378906-38.75976563-14.63378906-53.39355469 0l-1.58203125 1.58203125c-15.02929688 14.63378906-15.02929688 38.75976563 0 53.39355469l289.90722656 289.90722656L167.1171875 811.00390625c-14.63378906 14.63378906-14.63378906 38.75976563 0 53.39355469l1.58203125 1.58203125c14.63378906 14.63378906 38.75976563 14.63378906 53.39355469 0L512 576.07226563 801.90722656 865.97949219c14.63378906 14.63378906 38.75976563 14.63378906 53.39355469 0l1.58203125-1.58203125c14.63378906-14.63378906 14.63378906-38.75976563 0-53.39355469L566.97558594 521.09667969z'
  },

  previous: {
    box: '0 0 1024 1024',
    path: 'M461.077 508.785l213.988-161.85c2.475-1.43 5.57 0.357 5.57 3.215v323.7c0 2.858-3.095 4.645-5.57 3.215l-213.988-161.85c-2.475-1.428-2.475-5.002 0-6.43zM347.079 347.24h73.783c2.051 0 3.713 1.892 3.713 4.226v321.067c0 2.334-1.663 4.226-3.713 4.226H347.08c-2.05 0-3.713-1.892-3.713-4.226V351.466c0-2.334 1.662-4.226 3.713-4.226z M512 94.491c56.377 0 111.051 11.034 162.504 32.797 49.713 21.027 94.366 51.135 132.72 89.488s68.461 83.007 89.488 132.72c21.763 51.453 32.797 106.127 32.797 162.504s-11.034 111.051-32.797 162.504c-21.027 49.713-51.135 94.366-89.488 132.72s-83.007 68.461-132.72 89.488C623.051 918.475 568.377 929.509 512 929.509s-111.051-11.034-162.504-32.797c-49.713-21.027-94.366-51.135-132.72-89.488s-68.461-83.007-89.488-132.72C105.525 623.051 94.491 568.377 94.491 512s11.034-111.051 32.797-162.504c21.027-49.713 51.135-94.366 89.488-132.72s83.007-68.461 132.72-89.488C400.949 105.525 455.623 94.491 512 94.491m0-30.7C264.461 63.792 63.792 264.462 63.792 512S264.462 960.208 512 960.208 960.208 759.538 960.208 512 759.538 63.792 512 63.792z'
  },
  next: {
    box: '0 0 1024 1024',
    path: 'M562.923 508.785L348.935 346.934c-2.475-1.43-5.569 0.357-5.569 3.215V673.85c0 2.858 3.095 4.645 5.57 3.215l213.987-161.85c2.475-1.428 2.475-5.002 0-6.43zM676.921 347.24h-73.783c-2.051 0-3.713 1.892-3.713 4.226v321.067c0 2.334 1.662 4.226 3.713 4.226h73.783c2.05 0 3.713-1.892 3.713-4.226V351.466c0-2.334-1.663-4.226-3.713-4.226z M512 94.491c56.377 0 111.051 11.034 162.504 32.797 49.713 21.027 94.366 51.135 132.72 89.488s68.461 83.007 89.488 132.72c21.763 51.453 32.797 106.127 32.797 162.504s-11.034 111.051-32.797 162.504c-21.027 49.713-51.135 94.366-89.488 132.72s-83.007 68.461-132.72 89.488C623.051 918.475 568.377 929.509 512 929.509s-111.051-11.034-162.504-32.797c-49.713-21.027-94.366-51.135-132.72-89.488s-68.461-83.007-89.488-132.72C105.525 623.051 94.491 568.377 94.491 512s11.034-111.051 32.797-162.504c21.027-49.713 51.135-94.366 89.488-132.72s83.007-68.461 132.72-89.488C400.949 105.525 455.623 94.491 512 94.491m0-30.7C264.461 63.792 63.792 264.462 63.792 512S264.462 960.208 512 960.208 960.208 759.538 960.208 512 759.538 63.792 512 63.792z'
  },

  play: {
    box: '0 0 1024 1024',
    path: 'M511.35350613 6.02636267C231.4001792 6.02636267 4.65202773 232.77451413 4.65202773 512.72784107S231.4001792 1019.42789227 511.35350613 1019.42789227s506.7014784-226.74672427 506.7014784-506.7000512S791.30683307 6.02636267 511.35350613 6.02636267z m-101.3382976 734.71407466V284.71381653l304.0191744 228.01402454-304.0191744 228.01259626z m0 0'
  },
  pause: {
    box: '0 0 1024 1024',
    path: 'M512 7.314286C234.057143 7.314286 7.314286 234.057143 7.314286 512s226.742857 504.685714 504.685714 504.685714 504.685714-226.742857 504.685714-504.685714S789.942857 7.314286 512 7.314286z m-51.2 709.485714H358.4V307.2h102.4v409.6z m204.8 0H563.2V307.2h102.4v409.6z'
  },

  volume: {
    box: '0 0 30 30',
    path: 'M3 11a.842.842 0 0 1 1-1h4l5.859-4.2s2.119-1.716 2.141.2v18s-.021 1.6-1.619.7l-6.381-4.7h-4a.888.888 0 0 1-1-1v-8zm17.328-1.821a1.07 1.07 0 0 0-1.446 0 .917.917 0 0 0 0 1.357 6.056 6.056 0 0 1 0 8.939.923.923 0 0 0 0 1.362 1.072 1.072 0 0 0 1.446 0 7.9 7.9 0 0 0 0-11.658zm2.772-3.025a1.074 1.074 0 0 0-1.453 0 .927.927 0 0 0 0 1.36 10.175 10.175 0 0 1 0 15.028.924.924 0 0 0 0 1.36 1.082 1.082 0 0 0 1.453 0 12.027 12.027 0 0 0 0-17.748z'
  },
  mute: {
    box: '0 0 30 30',
    path: 'M3 11a.842.842 0 0 1 1-1h4l5.859-4.2s2.119-1.716 2.141.2v18s-.021 1.6-1.619.7l-6.381-4.7h-4a.888.888 0 0 1-1-1v-8z M28.995 18.558l-1.387 1.455-3.608-3.594-3.608 3.595-1.387-1.455 3.571-3.559-3.571-3.558 1.387-1.455 3.608 3.594 3.608-3.595 1.387 1.455-3.571 3.559z'
  },

  order: {
    box: '0 0 1024 1024',
    path: 'M902.836453 788.242532l0.002047-0.027629 0-0.001023c0-8.088212-3.349281-16.187681-9.06547-21.903869l-85.375459-85.375459c-28.250414-28.250414-72.058153 15.556301-43.806715 43.806715l32.484855 32.492018L153.287175 757.233284c-39.953967 0-39.953967 61.959144 0 61.959144l718.571752 0C888.637056 819.193451 902.821103 805.01759 902.836453 788.242532z M759.588935 271.402293l112.271016 0c26.963095 0 41.037648-33.758871 21.914102-52.883441l-85.375459-85.375459c-28.274974-28.227901-72.061222 15.572674-43.806715 43.827181l32.472576 32.472576-37.474496 0C719.632921 209.44315 719.632921 271.402293 759.588935 271.402293z M636.084063 271.402293l22.448268 0c39.956014 0 39.956014-61.959144 0-61.959144l-22.448268 0C596.128049 209.44315 596.128049 271.402293 636.084063 271.402293z M153.287175 271.402293l392.973116 0c39.956014 0 39.956014-61.959144 0-61.959144L153.287175 209.44315C113.332185 209.44315 113.332185 271.402293 153.287175 271.402293z M902.839523 514.317789c0-8.092305-3.347235-16.184611-9.06547-21.903869l-85.375459-85.375459c-28.274974-28.227901-72.061222 15.572674-43.806715 43.827181l32.472576 32.472576L153.287175 483.338217c-39.956014 0-39.952944 61.959144 0 61.959144l718.571752 0c16.785292 0 30.979572-14.192234 30.979572-30.978549L902.838499 514.317789z'
  },
  random: {
    box: '0 0 1024 1024',
    path: 'M814.07241482 318.06198518h103.76533333c27.1853037 0 41.26340741-32.52527408 22.5735111-52.30743703l-87.38133333-92.96402963c-11.77220741-12.50038518-31.43300741-13.1072-43.93339259-1.3349926-12.50038518 11.77220741-13.1072 31.43300741-1.33499258 43.9333926l38.10797036 40.53522963h-31.91845926C703.75348148 255.92414815 632.02797037 317.09108148 485.30014815 494.40237037l-10.67994074 12.86447408c-123.79022222 149.39780741-187.62714075 203.04023703-265.54216296 203.04023703h-103.15851853c-17.11217778 0-31.06891852 13.95674075-31.06891851 31.06891852s13.95674075 31.06891852 31.06891851 31.06891852h103.15851853c104.61487408 0 176.70447408-60.68148148 313.48053333-225.61374815l10.67994074-12.86447407c133.62062222-161.29137778 197.5789037-215.90471111 280.8338963-215.90471112z M917.95911111 707.87982222H814.19377778c-64.5650963 0-127.06702222-40.77795555-205.34613333-126.58157037-10.8013037-11.77220741-29.12711111-12.62174815-41.02068148-1.82044444-11.77220741 10.8013037-12.62174815 29.12711111-1.82044445 41.02068148 88.35223703 96.72628148 162.99045925 145.51419259 248.18725926 145.51419259h37.86524444l-42.84112592 46.72474074c-10.8013037 11.77220741-10.07312592 30.09801482 1.69908148 41.02068148 11.77220741 10.8013037 30.09801482 10.07312592 41.02068147-1.69908148l87.5026963-95.26992592c16.86945185-18.93262222 3.76225185-48.90927408-21.48124444-48.90927408zM106.04088889 313.57155555h103.15851852c62.50192592 0 123.66885925 41.38477037 203.04023704 129.73700742 11.40811852 12.74311111 31.06891852 13.83537778 43.81202963 2.42725925s13.83537778-31.06891852 2.42725925-43.81202963c-90.17268148-100.48853333-163.96136297-150.36871111-249.27952592-150.36871111h-103.15851852c-17.11217778 0-31.06891852 13.95674075-31.06891852 31.06891852 0 17.11217778 13.83537778 30.94755555 31.06891852 30.94755555z'
  },
  'list-loop': {
    box: '0 0 1024 1024',
    path: 'M651.358955 808.636001l-76.382645 0 153.321968 85.513606c6.846942 3.818979 9.19236 12.276604 5.239328 18.889209l-14.31503 23.951505c-3.953032 6.614651-12.707416 8.880251-19.554358 5.062296L476.525044 817.59607c-3.606131-2.01182-5.92085-5.321192-6.767124-8.960069l-10.137895 0 28.128641-53.982472 158.789493 0c141.688 0 256.55105-108.763123 256.55105-242.928798 0-105.273648-70.731948-194.881502-169.638585-228.603535l25.790386-49.495274c116.696816 42.180681 199.788256 150.757562 199.788256 278.098809C959.029266 675.704432 821.279972 808.636001 651.358955 808.636001zM376.481514 268.795932c-141.691069 0-256.55105 108.762099-256.55105 242.927775 0 122.229832 95.346555 223.337601 219.449038 240.36644l-26.601868 51.0507C171.033351 776.621866 63.990407 656.263661 63.990407 511.724731c0-163.979702 137.746224-296.912293 307.670312-296.912293l132.320655 0L350.660428 129.299855c-6.846942-3.818979-9.19236-12.276604-5.239328-18.890232l14.31503-23.951505c3.949962-6.612605 12.707416-8.879228 19.554358-5.060249l223.140103 124.455523c3.608178 2.01182 5.921873 5.320169 6.768147 8.959046l10.140964 0-28.129664 53.983495L376.481514 268.795932z'
  },
  'single-loop': {
    box: '0 0 1024 1024',
    path: 'M376.517329 260.160251l214.647685 0 28.118408-55.918567-10.136871 0c-0.845251-3.76986-3.158946-7.195889-6.765077-9.280364L379.326305 66.045205c-6.844895-3.956102-15.598256-1.607614-19.546172 5.242398l-14.309914 24.810059c-3.952009 6.851035-1.607614 15.611559 5.237281 19.567661l153.261593 88.577385L371.69858 204.242707c-169.859619 0-307.553655 137.696082-307.553655 307.553655 0 149.71993 107.002013 274.390347 248.693082 301.862026l26.591635-52.881394c-124.056434-17.638729-219.36615-122.370025-219.36615-248.980631C120.063493 372.820124 234.879472 260.160251 376.517329 260.160251z M958.844048 511.795339c0-131.905192-83.059718-244.373707-199.713554-288.065811l-25.780153 51.269687c98.869798 34.930557 169.57514 127.749546 169.57514 236.797148 0 138.973168-114.819049 251.635087-256.453836 251.635087L487.742527 763.431449l-28.118408 55.917544 10.134825 0c0.845251 3.770883 3.158946 7.197936 6.764054 9.281387l223.059262 128.916115c6.844895 3.956102 15.595186 1.607614 19.546172-5.243421l14.309914-24.810059c3.952009-6.850012 1.607614-15.610536-5.237281-19.566638l-153.263639-88.578408 76.353992 0C821.146942 819.346947 958.844048 681.651888 958.844048 511.795339z M421.457868 639.21845 421.457868 673.839969 603.375104 673.839969 603.375104 639.21845 532.49273 639.21845 532.49273 349.749686 419.61387 382.527207 419.61387 419.403069 492.544903 398.302495 492.544903 639.21845Z'
  },

  heart: {
    box: '0 0 24 24',
    path: 'M20.243 4.757a6 6 0 0 1 .236 8.236l-8.48 8.492l-8.478-8.492a6 6 0 0 1 8.48-8.464a5.998 5.998 0 0 1 8.242.228zM5.172 6.172a4 4 0 0 0-.192 5.451L12 18.654l7.02-7.03a4 4 0 0 0-5.646-5.64l-4.202 4.203l-1.415-1.414l2.825-2.827l-.082-.069a4 4 0 0 0-5.328.295z'
  },

  'heart-fill': {
    box: '0 0 24 24',
    path: 'M20.243 4.757a6 6 0 0 1 .236 8.236l-8.48 8.492l-8.478-8.492a6.002 6.002 0 0 1 6.74-9.553L6.343 7.358l1.414 1.415L12 4.53l-.013-.014l.014.013a5.998 5.998 0 0 1 8.242.228z'
  },

  download: {
    box: '0 0 16 16',
    path: 'M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 6.854l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708z'
  },
  // M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z M7.646 10.854a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 9.293V5.5a.5.5 0 0 0-1 0v3.793L6.354 8.146a.5.5 0 1 0-.708.708l2 2z

  playlist: {
    box: '0 0 16 16',
    path: 'M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'
  },

  search: {
    box: '0 0 16 16',
    path: 'M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'
  },

  'modal-close': { box: '0 0 16 16', path: 'M0 0 L16 16 M16 0 L0 16z' },

  'play-select': {
    box: '0 0 16 16',
    path: 'M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z'
  },

  plus: {
    box: '0 0 16 16',
    path: 'M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z'
  },

  trash: {
    box: '0 0 24 24',
    path: 'M10 18a1 1 0 0 0 1-1v-6a1 1 0 0 0-2 0v6a1 1 0 0 0 1 1ZM20 6h-4V5a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v1H4a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2ZM10 5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1h-4Zm7 14a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8h10Zm-3-1a1 1 0 0 0 1-1v-6a1 1 0 0 0-2 0v6a1 1 0 0 0 1 1Z'
  },

  multiple: {
    box: '0 0 16 16',
    path: 'M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z'
  },

  'exit-multiple': {
    box: '0 0 16 16',
    path: 'M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'
  },

  import: {
    box: '0 0 16 16',
    path: 'M11.798 8.271l-3.182 1.97c-.27.166-.616-.036-.616-.372V9.1s-2.571-.3-4 2.4c.571-4.8 3.143-4.8 4-4.8v-.769c0-.336.346-.538.616-.371l3.182 1.969c.27.166.27.576 0 .742z M.5 3l.04.87a1.99 1.99 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14h10.348a2 2 0 0 0 1.991-1.819l.637-7A2 2 0 0 0 13.81 3H9.828a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 6.172 1H2.5a2 2 0 0 0-2 2zm.694 2.09A1 1 0 0 1 2.19 4h11.62a1 1 0 0 1 .996 1.09l-.636 7a1 1 0 0 1-.996.91H2.826a1 1 0 0 1-.995-.91l-.637-7zM6.172 2a1 1 0 0 1 .707.293L7.586 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672z'
  },

  sort: {
    box: '0 0 16 16',
    path: 'M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z'
  },

  comment: {
    box: '0 0 24 24',
    path: 'M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29H9m1-6v3.08L13.08 16H20V4H4v12h6m7-5h-2V9h2v2m-4 0h-2V9h2v2m-4 0H7V9h2v2z'
  },

  'comment-fill': {
    box: '0 0 24 24',
    path: 'M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29H9m8-11V9h-2v2h2m-4 0V9h-2v2h2m-4 0V9H7v2h2z'
  },

  more: {
    box: '0 0 1024 1024',
    path: 'M512 960a448 448 0 1 0 0-896 448 448 0 0 0 0 896z m0 64A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM320 576a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m192 0a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m192 0a64 64 0 1 0 0-128 64 64 0 0 0 0 128z'
  },
  /* more2: {
    box:'0 0 256 256',
    path:'M128 24a104 104 0 1 0 104 104A104.2 104.2 0 0 0 128 24zm0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88zm12-88a12 12 0 1 1-12-12a12 12 0 0 1 12 12zm48 0a12 12 0 1 1-12-12a12 12 0 0 1 12 12zm-96 0a12 12 0 1 1-12-12a12 12 0 0 1 12 12z'
  },*/

  mv: {
    box: '0 0 16 16',
    path: 'M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'
  },

  vip: {
    box: '0 0 1024 1024',
    path: 'M919.5776 243.584H102.6816a102.4 102.4 0 0 0-102.4 102.4v332.3904a102.4 102.4 0 0 0 102.4 102.4h816.896c56.5504 0 104.1408-45.824 104.1408-102.3744V345.984c0-56.5504-47.5904-102.4-104.1408-102.4zM236.288 675.072c-12.8256 0-23.9616-12.1856-33.3568-36.5312L77.0816 345.6h102.4l73.7536 202.0608 108.5696-202.0608h99.2768l-182.4768 293.4016c-15.3856 24.0384-29.4656 36.0704-42.3168 36.0704z m173.5936 3.328l76.8-332.8h76.8l-76.8 332.8h-76.8z m519.2448-209.2032c-5.0432 36.3008-21.6064 65.664-49.5616 88.2432-26.8288 21.376-76.16 18.56-111.3088 18.56h-128l-25.6 102.4h-76.8l51.2-179.2h204.8c10.9056 0 32.4608 4.0192 40.9088-2.9184 8.3968-6.912 13.4144-16.1024 15.0272-27.52 1.5872-11.392-0.8704-20.4288-7.424-27.0592-6.5024-6.6048-12.0576-19.3024-22.912-19.3024h-230.4l76.8-76.8h153.6c34.9696 0 63.9488 14.0032 84.8128 35.4048 21.632 22.6048 29.952 51.968 24.8576 88.192z'
  },

  'local-music': {
    box: '0 0 16 16',
    path: 'M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4c0 .667.083 1.167.25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75c.167-.333.25-.833.25-1.5H2s-2 0-2-2V4zm1.398-.855a.758.758 0 0 0-.254.302A1.46 1.46 0 0 0 1 4.01V10c0 .325.078.502.145.602.07.105.17.188.302.254a1.464 1.464 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.758.758 0 0 0 .254-.302 1.464 1.464 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.757.757 0 0 0-.302-.254A1.46 1.46 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145z'
  },

  'net-music': {
    box: '0 0 16 16',
    path: 'M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z M14 11V2h1v9h-1zM6 3v10H5V3h1z M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z'
  },
  'my-special': {
    box: '0 0 16 16',
    path: 'M12 13c0 1.105-1.12 2-2.5 2S7 14.105 7 13s1.12-2 2.5-2 2.5.895 2.5 2z  M12 3v10h-1V3h1z  M11 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 16 2.22V4l-5 1V2.82z M0 11.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 .5 7H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 .5 3H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z'
  },
  'my-download': {
    box: '0 0 16 16',
    path: 'M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z'
  },
  box: {
    box: '0 0 16 16',
    path: 'M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z'
  },

  dir: {
    box: '0 0 24 24',
    path: 'M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z'
  },

  'more-line': {
    box: '0 0 24 24',
    path: 'M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'
  },

  'copy-link': {
    box: '0 0 24 24',
    path: 'M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'
  },

  cancel: {
    box: '0 0 24 24',
    path: 'M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'
  }
} as const;

export type IconNamedType = keyof typeof ICON_MAP;

// (响应式Props解构 version:3.5+)
const { name } = defineProps({
  name: { type: String as PropType<IconNamedType>, required: true }
});

const icon = computed<{ box: string; path: string }>(() => ICON_MAP[name]);
</script>

<template>
  <svg class="c-icon" :viewBox="icon.box">
    <path :d="icon.path"></path>
  </svg>
</template>
